<template>
  <div class="main-container">
    <div class="top">
      <div class="user-info">
        <router-link to="/">Node-Vue-Blog</router-link>
        <div class="info">
          <img :src="avatar || 'https://img0.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto'" alt="" />
          <span>{{ name }}</span>
          <el-button size="small" @click="add">发表新帖</el-button>
        </div>
      </div>
    </div>
    <router-view class="container"></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Index',
  computed: {
    ...mapGetters(['name']),
    ...mapGetters(['avatar'])
  },
  methods: {
    add() {
      this.$router.push('/add')
    }
  }
}
</script>

<style lang="less" scoped>
.main-container {
  .top {
    height: 50px;
    background-color: #283443;
    .user-info {
      width: 960px;
      margin: 0 auto;
      height: 50px;
      color: #fff;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      .info {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
          cursor: pointer;
        }
        span {
          margin: 0 20px;
          cursor: pointer;
        }
        button {
          background-color: #454545;
          border-color: #ccc;
          color: #ccc;
          &:hover {
            background-color: rgba(0, 0, 0, 0.1);
            color: #fff;
          }
        }
      }
    }
  }
  .container {
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
    height: calc(100vh - 50px);
  }
}
</style>
